<template>
  <div class="container">
    <transition name="slide">
      <router-view></router-view>
    </transition>
    <router-view name="footer"></router-view>
  </div>
</template>

<style lang="scss">
@import '@/lib/reset.scss';
body {
  @include font-size(.12rem);
}
.container {
  @include rect(100%,100%);
  @include flexbox();
  @include flex-direction(column);
  .slide-enter, .slide-leave-to {
    opacity: 0;
  }
  .slide-enter-active {
    transition: all 0.5s;
  }
  .slide-enter-to, .slide-leave {
    opacity: 1;
  }
  .slide-leave-active {
    transition: all 0s;
  }
  .box {
  @include flex();
  @include rect(100%,auto);
  @include overflow(auto);
  @include background-color(#f2f2f2);
  .header {
  @include rect(100%,auto);
  // @include background-color(#f5f5f5);
  @include text-align(center);
  }
  .content {
    @include flex();
    @include rect(100%, auto);
    // @include overflow(auto);
    // @include background-color(#f2f2f2);
    // 固定在页面右下角返回顶部样式
    .fixright {
       position:fixed;
       bottom:2rem;right:0;
       z-index:999;
       .right {
         img {
           width:.5rem;
           height:auto;
         }
  }
}
  }
 }
}
</style>
